<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Lazy Loading of iframe Widgets</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../libs/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <script src="../libs/jquery/jquery.js"></script>
    <script src="../libs/bootstrap/js/bootstrap.min.js"></script>
    <script src="../dist/jquery.lazyloadxt.extra.js"></script>
    <style>
        .placeholder {
            padding-bottom: 90%;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>Lazy Loading of iframe Widgets</h1>
        <p class="lead">Lazy loading of Facebook, Google+ Profile and Google Maps widgets as &lt;iframe&gt;s.</p>
    </div>

    <div class="placeholder">Scroll down to widgets...</div>

    <h3>Facebook Recommend Button</h3>
    <div>
        <iframe data-src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fressio.github.io%2Flazy-load-xt&amp;width&amp;layout=button_count&amp;action=recommend&amp;show_faces=true&amp;share=true&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe>
    </div>

    <!--h3>Google+ Profile</h3>
    <div>
        <iframe data-src="http://www.google.com/s2/u/0/widgets/ProfileCard?uid=108551811075711499995" width="100%" height="125" scrolling="no" style="border:0px solid"></iframe>
    </div-->

    <h3>Google Maps Engine Lite</h3>
    <div>
        <iframe data-src="https://mapsengine.google.com/map/embed?mid=zwRyVFL3kkaw.kuW2w7YjyMe4" width="320" height="240"></iframe>
    </div>

</div>
</body>
</html>